<template>
	<view class="">
		<!-- <view class="topBox">
			<image class="topBanner" src="/static/topImage.png" mode=""></image>
			<image class="topCircle" src="/static/yuan.png" mode=""></image>
			<view class="searchBox">
				<input type="text" placeholder="请输入搜索内容" class="topInput">
				<image src="/static/search.png" class="searchIcon" mode=""></image>
			</view>
		</view> -->
		<view class="childrenOptions childrenOptionsTop" v-for="(itemIn,indexIn) in onTask" :key="indexIn">
			<view class="childrenLeft">
				<view class="childrenUserName">
					{{itemIn.applicantName}}
				</view>
				<view class="childrenNumber" @click="call(itemIn.contactNumber)">
					{{itemIn.contactNumber}}
				</view>
			</view>
			<view class="childrenRight" @click="getPosition(itemIn.executionStatus,itemIn.filedPoorHouseholds,itemIn.guaranteeNumber,itemIn.id,itemIn.explorationTextStatus,itemIn.explorationPhotoStatus,itemIn.regionLock)">
				<view class="status1" v-if="itemIn.executionStatus == 2">正在侦查</view>
				<view class="status1" v-if="itemIn.executionStatus == 4">已完成</view>
				<block v-if="itemIn.executionStatus == 3">
					<view class="statusDes status2">拨打电话未接通</view>
					<view class="statusButton">继续侦查</view>
				</block>
				<block v-if="itemIn.executionStatus == 1">
					<view class="statusDes status2">任务已暂停</view>
					<view class="statusButton">继续侦查</view>
				</block>
				<block v-if="itemIn.executionStatus == 0|| itemIn.executionStatus == 5 ||itemIn.executionStatus == null">
					<view class="statusDes status3">暂未开始侦察</view>
					<view class="statusButton">开始侦查</view>
				</block>
			</view>
		</view>
		<view class="line">
		
		</view>
		<view class="wu" v-if="isShowEmpyt">
			~~当前状态暂无任务
		</view>
		<view class='listbox'>
			<view class='list kelong' v-if='showkelong' :style="'top:'+kelong.top+'px'">
				<view class="listTop">
					<view class="listTiteBox">
						<view class="listTitleBackground">

						</view>
						<view class="listTitle">
							{{kelong.taskName}}
						</view>
					</view>
					<view class="listRightBox">
						<view class="watchDesBox">
							<view class="watchingBox">
								<view class="watchDes">
									正在侦查
								</view>
								<view class="watchingNumber">
									{{kelong.goingCount}}
								</view>
								<view class="danwei">个</view>
							</view>
							<view class="watchingBox">
								<view class="watchDes">
									未接通
								</view>
								<view class="noWatchingNumber">
									{{kelong.noCount}}
								</view>
								<view class="danwei">个</view>
							</view>
						</view>
						<image src="/static/right.png" class="right" mode=""></image>
					</view>
				</view>
				<view class="line">

				</view>
			</view>

			<view class='list' v-for="(item,index) in optionList" :key="index">
				<view class="listTop">
					<view class="listTiteBox">
						<view class="listTitleBackground">

						</view>
						<view class="listTitle">
							{{item.taskName}}
						</view>
					</view>
					<view class="listRightBox" @click="changeOpen(index)">
						<view class="watchDesBox">
							<view class="watchingBox">
								<view class="watchDes">
									正在侦查
								</view>
								<view class="watchingNumber">
									{{item.goingCount}}
								</view>
								<view class="danwei">个</view>
							</view>
							<view class="watchingBox">
								<view class="watchDes">
									未接通
								</view>
								<view class="noWatchingNumber">
									{{item.noCount}}
								</view>
								<view class="danwei">个</view>
							</view>
						</view>
						<image src="/static/right.png" class="right" :class="item.isOpen?'rightOpen':''" mode=""></image>
					</view>
				</view>
				<view class="childrenBox" :style="item.isOpen?'height:'+(159*item.tasks.length)+'rpx;':''">
					<view class="childrenOptions" v-for="(itemIn,indexIn) in item.tasks" :key="indexIn">
						<view class="childrenLeft">
							<view class="childrenUserName">
								{{itemIn.applicantName}}
							</view>
							<view class="childrenNumber" @click="call(itemIn.contactNumber)">
								{{itemIn.contactNumber}}
							</view>
						</view>
						<view class="childrenRight" @click="getPosition(itemIn.executionStatus,itemIn.filedPoorHouseholds,itemIn.guaranteeNumber,itemIn.id,itemIn.explorationTextStatus,itemIn.explorationPhotoStatus,itemIn.executionStatus,itemIn.regionLock)">
							<view class="status1" v-if="itemIn.executionStatus == 2">正在侦查</view>
							<view class="status1" v-if="itemIn.executionStatus == 4">已完成</view>
							<block v-if="itemIn.executionStatus == 3">
								<view class="statusDes status2">拨打电话未接通</view>
								<view class="statusButton">继续侦查</view>
							</block>
							<block v-if="itemIn.executionStatus == 1">
								<view class="statusDes status2">任务已暂停</view>
								<view class="statusButton">继续侦查</view>
							</block>
							<block v-if="itemIn.executionStatus == 0|| itemIn.executionStatus == 5 ||itemIn.executionStatus == null">
								<view class="statusDes status3">暂未开始侦察</view>
								<view class="statusButton">开始侦查</view>
							</block>
						</view>
					</view>
				</view>
				<view class="line">

				</view>
				<view class='moreiconpl' @click.stop="" :data-index='index' @touchstart.stop='dragStart' @touchmove.stop='dragMove' @touchend.stop='dragEnd'></view>
			</view>
		</view>
		<view class="bottomBox">
			<view class="centerBorderBox">
				
			</view>
			<view class="maskBorder">
				
			</view>
			<view class="centerBox">
				<image class="centerBoxIcon" src="/static/bottomCenterIcon.png" mode=""></image>
			</view>
			<view class="bottomOptions" @click="refresh">
				<image class="bottomOptionsIcon1" src="/static/position.png" mode=""></image>
				<view class="bottomOptionsTitle">
					代办
				</view>
			</view>
			<view class="bottomOptions bottomOptions2" @click="link('/pages/kancha/statusList?status=4')">
				<image class="bottomOptionsIcon2" src="/static/alreadyIcon.png" mode=""></image>
				<view class="bottomOptionsTitle">
					办结
				</view>
			</view>
			<view class="bottomCenterTitle">
				侦查员——{{user.nickName?user.nickName:user.userName}}
			</view>
		</view>
		<view class="" style="height: 200rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				moveIndex:0,
				lineHeight:0,
				listHeight:0,
				kelong: {
					top:0
				},
				replace: {},
				optionList: [],
				showkelong: false,
				isOpen:false,
				onTask:[],
				isTasking:false,
				isShowEmpyt:false
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.isShowEmpyt = false
			this.isTasking = false
			this.isOpen = false
			if(!uni.getStorageSync('token')){
				uni.redirectTo({
					url:'/pages/index/login'
				})
			}
			uni.showLoading({
				title: '请稍等...'
			});
			this.user = uni.getStorageSync('user')
			this.getDetail()
		},
		onReady() {
			
		},
		methods: {
			// 刷新
			refresh(){
				this.isTasking = false
				this.isOpen = false
				if(!uni.getStorageSync('token')){
					uni.redirectTo({
						url:'/pages/index/login'
					})
				}
				uni.showLoading({
					title: '请稍等...'
				});
				this.user = uni.getStorageSync('user')
				this.getDetail()
			},
				
			link(url){
				uni.navigateTo({
					url
				})
			},
			// 联系电话
			call(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			// 获取字典信息
			async getDataInfo(){
				
			},
			// 获取列表数据
			async getDetail(){
				let that = this
				let res = await this.$get('/app/bus/mainTask?username='+uni.getStorageSync('user').userName + '&execuStatus=1;2;3;5&days=1',
				{})
				if(res.code == 200){
					res.data.forEach(item=>{
						item.isOpen = false
					})
					this.optionList = res.data
					console.log(this.optionList)
					let flag = false
					let arr = []
					res.data.forEach(item=>{
						item.tasks = item.tasks.filter(function(itemIn){
							return itemIn.executionStatus != 7
						})
						arr.push(...item.tasks)
					})
					this.onTask = arr.filter((item)=>{
						return item.executionStatus == 2
					})
					if(arr.length == 0){
						this.isShowEmpyt = true
					}
					if(this.onTask.length >0){
						this.isTasking = true
					}
					if(!this.listHeight){
						this.$nextTick(function(){
							uni.createSelectorQuery().select('.list').boundingClientRect(function(rect) {
								that.listHeight = rect.height
								console.log(rect.height)
								if(that.optionList.length==1){
									that.optionList[0].isOpen = true
									this.isOpen = true
								}
							}).exec();
							uni.createSelectorQuery().select('.line').boundingClientRect(function(rect) {
								that.lineHeight = rect.height
								console.log(rect.height)
							}).exec();
						})
					} else {
						if(that.optionList.length==1){
							that.optionList[0].isOpen = true
							this.isOpen = true
						}
					}
				}
				uni.hideLoading()
			},
			// 获取保险人信息
			async getHelpUserInfo(isSave){
				let res = await this.$get(`/app/bus/indexTask?id=${uni.getStorageSync('taskId')}`,{})
				if(res.code == 200){
					uni.setStorageSync('helpUser',res.data[0])
					// if(isSave == 1){
					// 	uni.navigateTo({
					// 		url:'/pages/kancha/familyInfo'
					// 	})
					// } else {
						uni.navigateTo({
							url:'/pages/kancha/chooseType'
						})
					// }
				}
				uni.hideLoading()
			},
			// 根据状态跳转
			getPosition(status,isSave,guaranteeNumber,id,explorationTextStatus,explorationPhotoStatus,executionStatus,lock){
				if(this.isTasking&&status != 2){
					uni.showModal({
						content: '当前有正在在侦查的任务',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				if(status == 4){
					uni.showModal({
						content: '此任务已完成',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				let that = this
				uni.showLoading({
					title:'请稍等...'
				})
				// if(lock != 1){
					uni.getLocation({
					    type: 'wgs84',
					    success: async function (res) {
					        console.log('当前位置的经度：' + res.longitude);
					        console.log('当前位置的纬度：' + res.latitude);
							let data = await that.$post('/app/bus/rangeLimit',{
								id:id,
								lng:res.longitude,
								lat:res.latitude
							})
							uni.hideLoading()
							if(lock != 1){
								if(data.code == 200){
									that.isLink(status,isSave,guaranteeNumber,id,explorationTextStatus,explorationPhotoStatus,executionStatus)
								}
								if(data.code == -1){
									uni.showModal({
										content: data.msg,
										showCancel: false,
										confirmText: '确定'
									});
								}
								if(data.code == 500){
									uni.showModal({
										content: '获取定位信息失败，请重试',
										showCancel: false,
										confirmText: '确定'
									});
								}
							} else {
								that.isLink(status,isSave,guaranteeNumber,id,explorationTextStatus,explorationPhotoStatus,executionStatus)
							}
							
							
					    },
						fail:function(e){
							that.errorMessage = '获取定位信息失败，请重新进入'
							uni.hideLoading()
							uni.showModal({
								content: '获取定位信息失败，是否检查配置',
								showCancel: true,
								cancelText: '取消',
								confirmText: '确定',
								success: res => {
									if(res.confirm){
										uni.openSetting({
										  success(res) {
										    console.log(res.authSetting)
										  }
										});
									}
								},
								fail: () => {},
								complete: () => {}
							});
						}
					});
				// } else {
				// 	that.isLink(status,isSave,guaranteeNumber,id,explorationTextStatus,explorationPhotoStatus,executionStatus)
				// }
				
			},
			isLink(status,isSave,guaranteeNumber,id,explorationTextStatus,explorationPhotoStatus,executionStatus){
				// if(status == 2){
				// 	uni.showModal({
				// 		content: '此用户正在被侦查中',
				// 		showCancel: false,
				// 		confirmText: '确定'
				// 	});
				// 	return
				// }
				if(this.isTasking&&status != 2){
					uni.showModal({
						content: '当前有正在在侦查的任务',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				if(status == 4){
					uni.showModal({
						content: '此任务已完成',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				uni.showLoading({
					title: '请稍等...',
					mask: false
				});
				uni.setStorageSync('photoStatus',explorationPhotoStatus)
				uni.setStorageSync('textStatus',explorationTextStatus)
				uni.setStorageSync('executionStatus',executionStatus)
				uni.setStorageSync('isSave',isSave)
				// if(explorationPhotoStatus!=0&&explorationTextStatus!=0){
				// 	uni.setStorageSync('isSave',1)
				// } else {
				// 	uni.setStorageSync('isSave',0)
				// }
				uni.setStorageSync('guaranteeNumber',guaranteeNumber)
				uni.setStorageSync('taskId',id)
				this.getHelpUserInfo(isSave)
			},
			changeOpen(index){
				this.optionList[index].isOpen = !this.optionList[index].isOpen
				this.optionList.forEach((item,indexIn)=>{
					if(index!=indexIn&&item.isOpen == true){
						item.isOpen = false
					}
				})
				this.getOpenStatus()
			},
			// 判断有没有打开的选项
			getOpenStatus(){
				let flag = false
				this.optionList.forEach(item=>{
					if(item.isOpen == true){
						flag = true
					}
				})
				if(flag){
					this.isOpen = true
				} else {
					this.isOpen = false
				}
			},
			dragStart: function(e) {
				
				if(this.isOpen){
					
					return
				}
				var that = this
				var kelong = that.kelong
				var i = e.currentTarget.dataset.index
				// kelong.xt = this.optionList[i].xt
				// kelong.name = this.optionList[i].name
				// kelong.subname = this.optionList[i].subname
				Object.keys(this.optionList[i]).forEach(item => {
					kelong[item] = this.optionList[i][item]
				})
				var query = uni.createSelectorQuery();
				//选择id
				query.select('.listbox').boundingClientRect(function(rect) {
					// console.log(rect.top)
					kelong.top = e.changedTouches[0].clientY - rect.top - (that.lineHeight/2) -(that.listHeight/2)
					that.kelong = kelong
					that.showkelong = true
				}).exec();
			},
			dragMove: function(e) {
				if(this.isOpen){
					
					return
				}
				var that = this
				var i = e.currentTarget.dataset.index
				var query = uni.createSelectorQuery();
				var kelong = that.kelong
				var listnum = that.optionList.length
				var optionList = that.optionList
				query.select('.listbox').boundingClientRect(function(rect) {
					kelong.top = e.changedTouches[0].clientY - rect.top - (that.lineHeight/2) -(that.listHeight/2)
					if (kelong.top < -this.listHeight) {
						kelong.top = -this.listHeight
					} else if (kelong.top > rect.height) {
						kelong.top = rect.height - this.listHeight
					}
					that.kelong = kelong
				}).exec();
			},
			dragEnd: function(e) {
				if(this.isOpen){
					
					return
				}
				var that = this
				var i = e.currentTarget.dataset.index
				var query = uni.createSelectorQuery();
				var kelong = that.kelong
				var listnum = that.optionList.length
				var optionList = that.optionList
				query.select('.listbox').boundingClientRect(function(rect) {
					kelong.top = e.changedTouches[0].clientY - rect.top - 30
					// if(kelong.top<-20){
					//   uni.showModal({
					//     title: '删除提示',
					//     content: '确定要删除此条记录？',
					//     confirmColor:'#e4463b'
					//   })
					// }
					var target = parseInt(kelong.top / 60)
					// var replace = that.replace
					var replace = {}
					if (target >= 0) {
						Object.keys(optionList[target]).forEach(item => {
							replace[item] = optionList[target][item]
						})
						// replace.xt = optionList[target].xt
						// replace.name = optionList[target].name
						// replace.subname = optionList[target].subname
						Object.keys(optionList[target]).forEach(item => {
							optionList[target][item] = optionList[i][item]
						})
						// optionList[target].xt = optionList[i].xt
						// optionList[target].name = optionList[i].name
						// optionList[target].subname = optionList[i].subname
						Object.keys(optionList[target]).forEach(item => {
							optionList[i][item] = replace[item]
						})
						// optionList[i].xt = replace.xt
						// optionList[i].name = replace.name
						// optionList[i].subname = replace.subname
					}
					that.optionList = optionList
					that.showkelong = false
				}).exec();
			}
		}
	}
</script>

<style scoped>
	.wu{
		padding-top: 200rpx;
		text-align: center;
		color: #ccc;
	}
	.topBox {
		width: 750rpx;
		height: 200rpx;
		position: relative;
		padding-top: 87rpx;
		z-index: 999;
	}
	.topBanner{
		width: 750rpx;
		height: 180rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.topCircle{
		height: 132rpx;
		position: absolute;
		width: 132rpx;
		top: -66rpx;
		right: 100rpx;
	}
	.searchBox {
		position: relative;
		width: 690rpx;
		height: 90rpx;
		border-radius: 16rpx;
		background: #fff;
		padding: 0 35rpx 0 0;
		display: flex;
		margin: 0 auto;
		align-items: center;
		box-shadow: 0 2rpx 16rpx -4rpx #E4463B;
	}

	.topInput {
		flex: 1;
		margin-right: 20rpx;
		font-size: 40rpx;
		padding-left: 90rpx;
	}

	.listbox {
		position: relative;
		overflow: hidden;
	}

	.listTop {
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		justify-content: space-between;
		height:130rpx
	}

	.right {
		width: 34rpx;
		height: 34rpx;
		position: relative;
		transition: all 0.3s;
	}
	.rightOpen{
		transform: rotate(90deg);
	}
	.listTiteBox {
		position: relative;
	}

	.listTitleBackground {
		height: 16rpx;
		width: 120rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: linear-gradient(90deg, #ffd356, #ffffff)
	}

	.listTitle {
		font-size: 34rpx;
		position: relative;
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.searchIcon {
		width: 42rpx;
		height: 45rpx;
	}

	.line {
		height: 20rpx;
		background-color: #efefef;
	}
	.list {
		/* display: flex;
		align-items: center; */
		position: relative;
		width: 750rpx;
		background-color: #ffffff;
	}

	.moreiconpl {
		position: absolute;
		top: 0;
		left: 0;
		width: 400rpx;
		height: 130rpx;
	}

	.kelong {
		position: absolute;
		z-index: 2;
		box-shadow: 0 0 8rpx 0 rgba(0,0,0,0.3);
	}
	.kelong .line{
		background: transparent;
	}
	.xt {
		width: 100rpx;
		height: 100rpx;
		background-color: #ccc;
	}

	.more {
		width: 100rpx;
		height: 100rpx;
		background-color: #ccc;
	}
	.childrenBox{
		padding:0 40rpx;
		transition: all 0.3s;
		height: 0;
		position: relative;
		overflow: hidden;
	}
	.childrenOptions{
		padding:30rpx 0;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.childrenUserName{
		font-size: 32rpx;
		line-height: 1;
	}
	.childrenNumber{
		font-size: 28rpx;
		line-height: 1;
		color: #ccc;
		margin-top: 24rpx;
	}
	.childrenRight{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	.status1{
		width: 160rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: white;
		text-align: center;
		border-radius: 80rpx;
		background-color: #ff2f2f;
	}
	.statusDes{
		font-size: 26rpx;
		line-height: 1;
	}
	.status2{
		color:#ff2f2f;
	}
	.statusButton{
		width: 170rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		color:#ff2f2f;
		border:1rpx solid #ff2f2f;
		text-align: center;
		margin-top: 20rpx;
	}
	.status3{
		color:#ccc;
	}
	.listRightBox{
		display: flex;
		align-items: center;
	}
	.watchDesBox{
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		justify-content: center;
	}
	.watchDes{
		font-size: 24rpx;
		color:#ccc;
		margin-right: 20rpx;
	}
	.watchingBox{
		display: flex;
		align-items: center;
	}
	.watchingNumber{
		font-size: 34rpx;
		color:#20d317;
		font-weight:700;
	}
	.noWatchingNumber{
		font-size: 34rpx;
		color:#fd2f2f;
		font-weight:700;
	}
	.danwei{
		margin-right: 20rpx;
	}
	.bottomBox{
		height: 120rpx;
		position:fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top:1rpx solid #ccc;
		background-color: white;
	}
	.centerBorderBox{
		position: absolute;
		top: -59rpx;
		left:50%;
		height:118rpx;
		width: 118rpx;
		transform: translate(-50%,5rpx);
		border-radius: 50%;
		border: 1rpx solid #ccc;
	}
	.centerBox{
		position: absolute;
		top: -58rpx;
		left:50%;
		height:116rpx;
		width: 116rpx;
		transform: translate(-50%,5rpx);
		background:white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.centerBoxIcon{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	.maskBorder{
		width: 200rpx;
		position: absolute;
		top: 0;
		left:50%;
		transform: translateX(-50%);
		height: 60rpx;
		background: white;
	}
	.bottomOptions{
		position: absolute;
		top: 0;
		left: 0;
		width: 230rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.bottomOptions2{
		right: 0;
		left: initial;
	}
	.bottomOptionsIcon1{
		width: 35rpx;
		height: 40rpx;
	}
	.bottomOptionsIcon2{
		width: 36rpx;
		height: 41rpx;
	}
	.bottomOptionsTitle{
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #ccc;
	}
	.bottomCenterTitle{
		position: absolute;
		left: 50%;
		bottom: 0;
		line-height: 63rpx;
		font-size: 22rpx;
		transform: translate(-50%);
		color: #ccc;
		text-align: center;
	}
	.childrenOptionsTop{
		padding: 30rpx 40rpx;
	}
</style>
